@font-face {
    font-family: TacticSans;
    font-weight: bold;
    src: url("/public/fonts/TacticSans-Bld.otf") format("opentype");
}

.body-anonymous {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 5rem!important;
}

.content-anonymous {
    min-width: 0;
    flex-grow: 1;
}

.footer-anonymous {
    color:#f2f6fc !important;
    line-height: 1;
    font-size: .8rem;
}

.footer-admin {
    color:#a7aeb8 !important;
    line-height: 1;
    font-size: .8rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.logo-header-anonymous {
    max-width: 100%;
    max-height: 100px;
}

.body-anonymous {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 5rem!important;
}

.content-anonymous {
    min-width: 0;
    flex-grow: 1;
}

.footer-anonymous {
    color:#f2f6fc !important;
    line-height: 1;
    font-size: .8rem;
}

.footer-admin {
    color:#a7aeb8 !important;
    line-height: 1;
    font-size: .8rem;
    height: 5rem;
    display: flex;
    align-items: center;
}

.logo-header-anonymous {
    max-width: 100%;
    max-height: 100px;
}

.bg-jeu {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/public/images/fond_jeu.jpg');
    background-size: cover;
}

.bg-ecran {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('/public/images/fond_ecran.jpg');
    background-size: cover;
}

.bg-vertical {
    background-image: url('/public/images/fond_vertical.jpg');
}

/* Fond vidéo des écrans géants (repêchage et candidats). Passe DERRIÈRE le contenu
   (z-index -1) : la vue qui l'utilise doit neutraliser le background de « bg-ecran ». */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

.logo-horizontal {
    min-height: 100px;
    background-image: url('/public/images/logo_horizontal_de.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ====== Vignettes candidats — modèle 3 couches repris de `admin` (FR) ======
   Décision Luc, 17/07/2026 : admin-de exploite désormais les images comme admin.
   Le gabarit (fond.png / bordure.png / fond_duo.png) est le FR RECOLORÉ en violet,
   généré par public/images/vote/generate_gabarit_de.py depuis les couleurs relevées
   sur cloud/vote-de/elimine.png. Les vignettes de cloud/vote-de sont en 152x182 sans
   cadre cuit : c'est le CSS qui compose fond + photo masquée + bordure.
   Le trio, retiré le 17/07/2026, est rétabli le 22/07/2026 : les règles .div-groupe-3
   sont de nouveau présentes, comme côté FR. */
.div-candidat {
    position: relative;
    width: 180px;
    height: 211px;
}

.div-candidat-sm {
    position: relative;
    width: 80px;
    height: 93px;
}

.img-candidat {
    position: absolute;
    top: 6.64%;     /* 14/211 : recadrage sur la zone de contenu du fond (dézoom) */
    left: 7.22%;    /* 13/180 */
    width: 85.56%;  /* 154/180 */
    height: 87.2%;  /* 184/211 */
    object-fit: cover;
    z-index: 2;
    /* masque = forme arrondie du fond, agrandi (1/inset) pour caler son rectangle arrondi sur la boîte */
    -webkit-mask-image: url('/public/images/vote/fond.png');
    mask-image: url('/public/images/vote/fond.png');
    -webkit-mask-size: 116.88% 114.67%;
    mask-size: 116.88% 114.67%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fnd-candidat {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.bordure-candidat {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 4;
}

/* Tuile « éteinte » : un VOILE violet (fond_overlay.png / fond_duo_overlay.png) est posé
   PAR-DESSUS la photo opaque, sous la bordure néon (décision Luc, 17/07/2026 au soir).
   Remplace l'ancien filtre CSS `saturate/brightness` sur la photo. Le voile est une couche
   à part entière, rendue dans la vue ; ici on ne fait que la MONTRER/CACHER selon l'état :
     - tuile active   -> voile caché (photo pleine couleur) ;
     - tuile inactive (.alpha-candidat) -> voile visible.
   .fnd-overlay = tuile individuelle (écran géant + webapp) ; .fnd-groupe-overlay = duo.
   Éliminé définitif = pas de photo, mais le voile est RENDU (demande de Luc, 17/07 au soir) :
   cadre voilé sans visage. */
.fnd-overlay,
.fnd-groupe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: none;              /* actif : aucun voile */
    pointer-events: none;       /* le clic traverse jusqu'à la tuile (webapp de vote) */
}
.fnd-overlay {
    object-fit: cover;          /* comme .fnd-candidat */
}
.fnd-groupe-overlay {
    object-fit: fill;           /* comme .fnd-groupe (tuile-groupe étirée) */
}
.alpha-candidat .fnd-overlay,
.alpha-candidat .fnd-groupe-overlay {
    display: block;             /* inactif : voile violet visible */
}

/* ====== Vignettes groupées (vote par duos/trios) ======
   Un groupe = un cadre étiré sur N photos, avec UN seul masque arrondi autour du
   groupe (et non plus une vignette par candidat). Le fond et la bordure sont
   étirés (object-fit: fill) -> coins arrondis déformés, conformément au besoin. */
.div-groupe {
    position: relative;
}
.div-groupe-sm {
    height: 93px;
}
/* Aspect des tuiles = aspect des fonds générés (2 ou 3 cellules de 154px + marges
   13px de chaque côté, hauteur 211) -> fond_duo = 334x211, fond_trio = 488x211. */
.div-groupe-2 {
    aspect-ratio: 334 / 211;
}
.div-groupe-3 {
    aspect-ratio: 488 / 211;
}
.fnd-groupe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
}
/* Bordure d'un groupe = "5-slice" horizontal de bordure.png (180px de large) :
   3 bandes fixes de 50px (coins/cible gauche, centre, droite) NON déformées, et
   2 connecteurs de 15px (segments de ligne droite) seuls étirés -> cible propre. */
.bordure-groupe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: flex;
}
.bordure-groupe .bd {
    height: 100%;
    background-image: url('/public/images/vote/bordure.png');
    background-repeat: no-repeat;
}
/* Bandes fixes : largeur = 50/211 de la hauteur (aspect-ratio) -> jamais étirées,
   taille constante quel que soit le nombre de candidats. */
.bordure-groupe .bd-fixe {
    flex: 0 0 auto;
    aspect-ratio: 50 / 211;
    background-size: auto 100%;
}
.bordure-groupe .bd-left {
    background-position: left center;
}
.bordure-groupe .bd-center {
    background-position: center center;
}
.bordure-groupe .bd-right {
    background-position: right center;
}
/* Connecteurs : seules les tranches sources [50;65] et [115;130] (15px) sont
   étirées horizontalement pour combler la largeur (lignes droites -> propre). */
.bordure-groupe .bd-stretch {
    flex: 1 1 0;
    min-width: 0;
    background-size: 1200% 100%;
}
.bordure-groupe .bd-conn1 {
    background-position: 30.303% center;
}
.bordure-groupe .bd-conn2 {
    background-position: 69.697% center;
}
/* Zone des photos = zone "contenu" du fond (marges vides exclues), comme en solo.
   top/hauteur identiques (14/211 et 184/211) ; left/largeur et masque dépendent du
   nombre de cellules (le masque = forme arrondie du fond_duo). */
.photos-groupe {
    position: absolute;
    top: 6.6351%;        /* 14/211 */
    height: 87.2038%;    /* 184/211 */
    z-index: 2;
    display: flex;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Duos et trios : la grille flex des photos et son masque unique autour du groupe. */
.div-groupe-2 .photos-groupe {
    left: 3.8922%;       /* 13/334 */
    width: 92.2156%;     /* 308/334 */
    -webkit-mask-image: url('/public/images/vote/fond_duo.png');
    mask-image: url('/public/images/vote/fond_duo.png');
    -webkit-mask-size: 108.4416% 114.6739%;   /* 334/308 x 211/184 */
    mask-size: 108.4416% 114.6739%;
}
.div-groupe-3 .photos-groupe {
    left: 2.6639%;       /* 13/488 */
    width: 94.6721%;     /* 462/488 */
    -webkit-mask-image: url('/public/images/vote/fond_trio.png');
    mask-image: url('/public/images/vote/fond_trio.png');
    -webkit-mask-size: 105.6277% 114.6739%;   /* 488/462 x 211/184 */
    mask-size: 105.6277% 114.6739%;
}
.photos-groupe .img-photo {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.virtual-key {
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    color: black;
    text-align: center;
    font-size: 25;
    font-weight: bolder;
    padding-top: 11px;
    margin: 10px;
}

.virtual-case {
    width: 40px; 
    height: 40px;
    border: solid 4px white;
    border-radius: .75rem;
    margin: 10px;
}

.virtual-circle {
    width: 16px; 
    height: 16px;
    border-radius: 8px;
    background-color: #e8471e;
    margin: 8px;
}

.btn:disabled, .btn.disabled {
    pointer-events: none;
    opacity: 0.3;
}